<template>
  <a
    class="menu-link"
    href="javascript:void(0)"
    :title="theme.value === 'light' ? '纯白' : '雅黑'"
    @click="changeTheme">
    <div class="badge left-badge">
      <i class="fy-icon-skin header-btn-icon"></i>
    </div>
  </a>
</template>

<script>
  import { mapMutations, mapState } from 'vuex'
  import { themes } from '@/config'

  export default {
    name: 'TopTheme',
    computed: {
      ...mapState('viewState', ['theme'])
    },
    methods: {
      ...mapMutations('viewState', ['setTheme']),
      changeTheme() {
        const themeKey = this.theme.value === 'default' ? 'light' : 'default'
        this.setTheme(themes[themeKey])
      }
    }
  }
</script>
